<template>
    <div>
        <!--条件栏-->
        <el-form ref="form" :model="Form" label-width="80px">
            <el-form-item label="选择时间" prop="startTime">
                <el-date-picker
                        v-model="Form.startTime"
                        type="daterange"
                        format="yyyy-MM-dd "
                        value-format="yyyy-MM-dd"
                        clearable
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
                <span>供应商:</span>
                <el-input v-model="Form.supplierName" style="width: 130px;" clearable placeholder="请输入内容"></el-input>
                <el-button style="margin-left: 7%" type="primary" @click="select">查询</el-button>
                <el-button type="primary" @click="dialogFormVisible = true">添加供应商</el-button>
                <!--添加弹窗框-->
                <el-dialog style="margin-left: 20px" title="添加供应商" :visible.sync="dialogFormVisible" width="34%"
                           center>
                    <el-form ref="subForm" :rules='rules' :model="subForm" label-width="80px">
                        <el-form-item label="供应商:" :label-width="formLabelWidth" prop="supplierName">
                            <el-input v-model="subForm.supplierName" clearable placeholder="请输入内容">
                            </el-input>
                        </el-form-item>
                        <br>
                        <el-form-item label="手机号:" :label-width="formLabelWidth" prop="supplierName">
                            <el-input v-model="subForm.SupplierPhone" clearable placeholder="请输入内容">
                            </el-input>
                        </el-form-item>
                        <br>
                        <el-form-item label="所在地区" :label-width="formLabelWidth" prop="city">
                            <div class="city" @click="toAddress">
                                <el-input v-model="subForm.city" clearable placeholder="请点击输入框选择"></el-input>
                            </div>
                            <i class="arrow-r"> </i>
                            <v-distpicker type="mobile" @selected='selected' v-show="addInp">
                            </v-distpicker>
                            <div class="mask" v-show="mask"></div>
                        </el-form-item>
                        <br>
                        <el-form-item label="具体地址" :label-width="formLabelWidth" prop="details">
                            <el-input v-model="subForm.details" clearable placeholder="请输入内容"></el-input>
                        </el-form-item>
                        <br>
                        <el-form-item label="商品类型选取" :label-width="formLabelWidth" prop="type">
                            <el-checkbox-group v-model="subForm.type">
                                <el-checkbox label="饮料" name="type"></el-checkbox>
                                <el-checkbox label="零食" name="type"></el-checkbox>
                                <el-checkbox label="酒类" name="type"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addSupplier">确 定</el-button>
                    </div>
                </el-dialog>
            </el-form-item>
        </el-form>
        <div>
            <!--表格-->
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        label="序号"
                        type="index"
                        :index="indexMethod"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="supplierTime"
                        label="申请时间"
                        width="160"
                >
                </el-table-column>
                <el-table-column
                        prop="supplierName"
                        label="供应商"
                >
                </el-table-column>
                <el-table-column
                        prop="supplierType"
                        label="商品分类"
                >
                </el-table-column>
                <el-table-column
                        prop="supplierSite"
                        label="地址"
                        width="200"
                >
                </el-table-column>
                <el-table-column
                        prop="modifyTime"
                        label="最后修改时间"
                        width="160"
                >
                </el-table-column>
                <el-table-column label="操作" width="160">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">移除
                        </el-button>
                        <el-button
                                size="mini"
                                type="info"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <!--编辑弹窗-->
                        <el-dialog style="margin-left: 20px" title="供应商修改" :visible.sync="dialogForm" width="34%"
                                   center>
                            <el-form ref="form" :rules='rules' :model="subForm" label-width="80px">
                                <el-form-item label="供应商:" :label-width="formLabelWidth" prop="supplierName">
                                    <el-input v-model="subForm.supplierName" clearable placeholder="请输入内容">
                                    </el-input>
                                </el-form-item>
                                <br>
                                <el-form-item label="手机号:" :label-width="formLabelWidth" prop="supplierName">
                                    <el-input v-model="subForm.SupplierPhone" clearable placeholder="请输入内容">
                                    </el-input>
                                </el-form-item>
                                <br>
                                <el-form-item label="所在地区" :label-width="formLabelWidth" prop="city">
                                    <div class="city" @click="toAddress">
                                        <el-input v-model="subForm.city" clearable placeholder="请点击输入框选择"></el-input>
                                    </div>
                                    <i class="arrow-r"> </i>
                                    <v-distpicker type="mobile" @selected='selected' v-show="addInp">
                                    </v-distpicker>
                                    <div class="mask" v-show="mask"></div>
                                </el-form-item>
                                <br>
                                <el-form-item label="具体地址" :label-width="formLabelWidth" prop="details">
                                    <el-input v-model="subForm.details" clearable placeholder="请输入内容"></el-input>
                                </el-form-item>
                                <br>
                                <el-form-item label="商品类型选取" :label-width="formLabelWidth" prop="type">
                                    <el-checkbox-group v-model="subForm.type">
                                        <el-checkbox label="饮料" name="type"></el-checkbox>
                                        <el-checkbox label="零食" name="type"></el-checkbox>
                                        <el-checkbox label="酒类" name="type"></el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogForm = false">取 消</el-button>
                                <el-button type="primary" @click="updateData(scope.$index, scope.row)">确 定</el-button>
                            </div>
                        </el-dialog>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <!--
            size-change：选择每页显示几行
            current-change：上一页 下一页
            current-page：当前页
            page-sizes：一页显示多少行的集合
            page-size：一页显示多少行
            total：总条数
                 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page=page
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size=size
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=total>
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import VDistpicker from 'v-distpicker' //引入安装好的包
    export default {
        name: 'SupplierManage',
        components: {VDistpicker},
        mounted() {//默认第一次加载
            initTable(this)
        },
        data() {
            return {
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now()
                    }
                },
                tableData: [],
                total: 0,
                page: 1,
                size: 5,
                Form: {
                    startTime: '',
                    overTime: '',
                    supplierName: ''
                },
                dialogFormVisible: false,
                dialogForm: false,
                formLabelWidth: '120px',
                subForm: {
                    supplierName: '',
                    SupplierPhone: '',
                    city: '',
                    details: '',
                    type: []
                },
                addInp: false,
                mask: false,
                rules: {
                    supplierName: [
                        {
                            required: true,
                            message: '供应商必须选',
                            trigger: ['blur', 'change']
                        }
                    ],
                    type: [
                        {
                            required: true,
                            message: '商品的类型必须勾选',
                            trigger: ['blur', 'change']
                        }
                    ],

                    city: [
                        {
                            required: true,
                            message: '城市必须选',
                            trigger: ['blur', 'change']
                        }
                    ],
                    details: [
                        {
                            required: true,
                            message: '具体地址必须填写',
                            trigger: ['blur', 'change']
                        }
                    ]
                }
            }
        },
        methods: {
            select() {
                if (this.Form.startTime.toString().split(",")[0] == this.Form.startTime.toString().split(",")[1]) {
                    this.$message("温馨提示：开始日期和结束日期不能一致，请重新选择！")
                    return false
                }
                initTable(this)
            },
            verification() {
                if (this.Form.startTime.toString().split(",")[0] == this.Form.startTime.toString().split(",")[1]) {
                    this.$message("温馨提示：开始日期和结束日期不能一致，请重新选择！")
                    return false
                }
                initTable(this)
            },
            // 点击弹出三级联动
            toAddress() {
                this.mask = true
                this.addInp = true
            },
            // 省市区三级联动
            selected(data) {
                this.mask = false
                this.addInp = false
                this.subForm.city = data.province.value + ' ' + data.city.value + ' ' + data.area.value
            },
            //以下是表格部分的方法
            indexMethod(index) {
                return index + 1
            },
            handleSizeChange(val) {
                this.size = val
                initTable(this)
                console.log(`每页 ${val} 条`)
            },
            handleCurrentChange(val) {
                this.page = val
                initTable(this)
                console.log(`当前页: ${val}`)
            },
            //数据表格移除的方法
            handleDelete(index, row) {
                this.$confirm('是否确认移除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("delSupplier", {
                        supplierId: row.supplierId,
                        supplierStateID: 2,
                    }).then(resp => {
                        if (resp.data == "移除成功") {
                            this.$message.success(resp.data)
                            initTable(this)
                            return false
                        }
                        this.$message.error(new Error(resp.data))
                    })
                }).catch(() => {
                    //几点取消的提示
                });
            },
            //以下是数据添加的方法
            addSupplier() {
                alert(this.subForm.type)
                if (this.subForm.supplierName == null || this.subForm.supplierName === '') {
                    this.$message.error(new Error('供应商必须填写'))
                    return false
                } else {
                    let r = /^[\u4E00-\u9FA5A-Za-z]+$/;
                    if (!r.test(this.subForm.supplierName)) {
                        this.$message.error(new Error('请输入正确的供应商名称'))
                        return false
                    }
                }
                if (this.subForm.SupplierPhone == null || this.subForm.SupplierPhone === '') {
                    this.$message.error(new Error('手机号码必填'))
                    return false
                } else {
                    let r = /^[1][358][0-9]{9}$/;
                    if (!r.test(this.subForm.SupplierPhone)) {
                        this.$message.error(new Error('请输入正确的手机号'))
                        return false
                    }
                }
                if (this.subForm.city == null || this.subForm.city === '') {
                    this.$message.error(new Error('所在区域必须选择'))
                    return false
                }
                if (this.subForm.details == null || this.subForm.details === '') {
                    this.$message.error(new Error('详细地址不能为空'))
                    return false
                }


                if (this.subForm.type == null || this.subForm.type.length === 0) {
                    this.$message.error(new Error('商品的类型必须勾选'))
                    return false
                }

                //添加的数据发往后台
                this.$axios.post("addSupplier", {
                    supplierName: this.subForm.supplierName,
                    supplierPhone: this.subForm.SupplierPhone,
                    supplierSite: this.subForm.city + " " + this.subForm.details,
                    goodsType: this.subForm.type
                }).then(resp => {
                    if (resp.data == '添加成功') {
                        this.$message.success(resp.data)
                        this.dialogFormVisible = false;
                        initTable(this)
                        this.$refs['subForm'].resetFields()
                    } else {
                        this.$message.error(new Error(resp.data))
                    }
                })
            },
            //修改数据的方法
            handleEdit(index, row) {
                // alert(row.supplierId)
                this.dialogForm = true
                this.supplierId = row.supplierId
                this.subForm.supplierName = row.supplierName
                this.subForm.SupplierPhone = row.supplierPhone
                this.subForm.city = row.supplierSite.substring(0, row.supplierSite.lastIndexOf("区") + 1)
                this.subForm.details = row.supplierSite.substring(row.supplierSite.lastIndexOf("区") + 2), ((row.supplierSite.length) - 1)

            },
            updateData(index, row) {
                // alert(this.supplierId)
                if (this.subForm.supplierName == null || this.subForm.supplierName === '') {
                    this.$message.error(new Error('供应商必须填写'))
                    return false
                } else {
                    let r = /^[\u4E00-\u9FA5A-Za-z]+$/;
                    if (!r.test(this.subForm.supplierName)) {
                        this.$message.error(new Error('请输入正确的供应商名称'))
                        return false
                    }
                }
                if (this.subForm.SupplierPhone == null || this.subForm.SupplierPhone === '') {
                    this.$message.error(new Error('手机号码必填'))
                    return false
                } else {
                    let r = /^[1][358][0-9]{9}$/;
                    if (!r.test(this.subForm.SupplierPhone)) {
                        this.$message.error(new Error('请输入正确的手机号'))
                        return false
                    }
                }
                if (this.subForm.city == null || this.subForm.city === '') {
                    this.$message.error(new Error('所在区域必须选择'))
                    return false
                }
                if (this.subForm.details == null || this.subForm.details === '') {
                    this.$message.error(new Error('详细地址不能为空'))
                    return false
                }


                if (this.subForm.type == null || this.subForm.type.length === 0) {
                    this.$message.error(new Error('商品的类型必须勾选'))
                    return false
                }
                this.$axios.post("updateSupplierInfo", {
                    supplierName: this.subForm.supplierName,
                    supplierPhone: this.subForm.SupplierPhone,
                    supplierSite: this.subForm.city + " " + this.subForm.details,
                    goodsType: this.subForm.type,
                    supplierId: this.supplierId
                }).then(resp => {
                    if (resp.data == '修改成功') {
                        this.$message.success(resp.data)
                        this.dialogForm = false;
                        initTable(this)
                    } else {
                        this.$message.error(new Error(resp.data))
                    }
                })
            }
        }
    }

    function initTable($this) {
        $this.$axios.post("getSupplierList", {
            page: $this.page,
            size: $this.size,
            startTime: $this.Form.startTime.toString().split(",")[0],
            overTime: $this.Form.startTime.toString().split(",")[1],
            supplierName: $this.Form.supplierName
        }).then(resp => {
            if (resp) {
                $this.tableData = resp.data.supplierList
                $this.total = resp.data.count
            }
        })
    }

</script>

<style scoped>

</style>
